<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>角色管理</title>
  <meta name="renderer" content="webkit">
  <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
  <meta name="viewport"
        content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=0">

  <link rel="stylesheet" href="../../layui/css/layui.css" media="all">
  <link rel="stylesheet" href="../../css/admin.css" media="all">
  <script src="../../layui/layui.js"></script>
</head>
<body>

<div class="layui-fluid">
  <div class="layui-card">
    <div class="layui-form layui-card-header layuiadmin-card-header-auto">
      <div class="layui-form-item">
        <div class="layui-inline">
          <label class="layui-form-label">角色名称</label>
          <div class="layui-input-block">
            <input type="text" name="rolename" placeholder="请输入" autocomplete="off" class="layui-input">
          </div>
        </div>
        <div class="layui-inline">
          <label class="layui-form-label">启用状态</label>
          <div class="layui-input-block">
            <select name="status">
              <option value="0">启用</option>
              <option value="1">未启用</option>
            </select>
          </div>
        </div>
        <div class="layui-inline">
          <button class="layui-btn layuiadmin-btn-roleadmin" lay-submit lay-filter="LAY-role-front-search">
            <i class="layui-icon layui-icon-search layuiadmin-button-btn"></i>
          </button>
        </div>
      </div>
    </div>

    <div class="layui-card-body">
      <div style="padding-bottom: 10px;">
        <button class="layui-btn layuiadmin-btn-roleadmin" data-type="batchdel">删除</button>
        <button class="layui-btn layuiadmin-btn-roleadmin" data-type="add">添加</button>
      </div>

      <table id="LAY-role-manage" lay-filter="LAY-role-manage"></table>
      <!--  &lt;!&ndash;头像显示&ndash;&gt;
        <script type="text/html" id="imgTpl">
          <img style="display: inline-block; width: 50%; height: 100%;" src= {{ d.avatar }} onclick="showBigImage(this);">
        </script>-->
      <!--状态判断-->
      <script type="text/html" id="statusTpl">
        <input type="checkbox" name="" lay-skin="primary">


      </script>
      <!-- <script type="text/html" id="statusTp1">
           {{# if(d.status=1){}}

       </script>-->

      <script type="text/html" id="table-roleadmin-webrole">
        <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit"><i
                class="layui-icon layui-icon-edit"></i>修改</a>
        <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"><i
                class="layui-icon layui-icon-delete"></i>删除</a>
      </script>
    </div>
  </div>
</div>


<script type="text/javascript">

  layui.use(['layer', 'table', 'form'], function () {
    var $ = layui.$
        , form = layui.form
        , table = layui.table;
    //加载table
    table.render({
      elem: '#LAY-role-manage'
      , url: '/role/pageRole'
      , cellMinWidth: 80 //全局定义常规单元格的最小宽度
      , title: '角色数据表'
      , cols: [[
        {type: 'checkbox', fixed: 'left'}
        , {field: 'id', width: 50, title: 'ID'}
        , {field: 'role_number', title: '角色编号'}
        , {field: 'role_name', title: '角色名称'}
        , {field: 'role_initname', title: '创建人'}
        , {field: 'update_time', title: '更新时间'}
        , {field: 'status', title: '状态（启用/未启用）', width: 80, templet: '#statusTpl'}
        , {fixed: 'right', title: '操作', toolbar: '#table-roleadmin-webrole', width: 350}
      ]]
      , page: true,
      limit: 5
    });


    //监听搜索
    form.on('submit(LAY-role-front-search)', function (data) {
      var field = data.field;

      //执行重载
      table.reload('LAY-role-manage', {
        where: field
      });
    });

    //事件
    var active = {
      batchdel: function () {
        var checkStatus = table.checkStatus('LAY-role-manage')
            , checkData = checkStatus.data; //得到选中的数据
        if (checkData.length === 0) {
          return layer.msg('请选择数据');
        }

        layer.prompt({
          formType: 1
          , title: '敏感操作，请验证口令'
        }, function (value, index) {
          layer.close(index);

          layer.confirm('确定删除吗？', function (index) {
            //定义空数组
            var ids = new Array();
            $.each(checkData, function (index, item) {
              //每循环一次，将id取出，塞给数组。
              ids.push(item.id)
            })
            //通过Ajax访问后台实现删除功能
            $.ajax({
              url: "/deleteRole",
              type: "post",
              data: {ids: ids}, //直接传数组
              traditional: true, //用传统的方式来序列化数据
              dataType: "json",
              success: function (res) {
                if (res.code == 200) {
                  layer.msg(res.msg);
                  //执行重载
                  table.reload('LAY-role-manage', {
                    page: {
                      curr: 1 //重新从第 1 页开始
                    }
                    , where: {
                      key: {
                        id: new Date().getTime()
                      }
                    }
                  });
                }
                if (res.code == 500) {
                  layer.msg(res.msg);
                }
              }
            });
          });
          table.reload('LAY-user-manage');
        });
      }
    }
    //监听行工具事件
    table.on('tool(LAY-role-manage)', function (obj) {
      var data = obj.data;
//            console.log(data)
      if (obj.event === 'lock') {
        alert("未启用")
      } else if (obj.event === 'edit') {
        layer.open({
          type: 2
          , title: '修改角色'
          , content: 'user/editroleform.html'
          , maxmin: true
          , area: ['460px', '570px']
          , btn: ['确定', '取消']
          , success: function (layero, index) {//在页面加载成功之前将数据回显
            var body = layer.getChildFrame('body', index);
            var iframeWin = layero.find('iframe')[0].contentWindow; //得到iframe页的窗口对象，执行iframe页的方法：iframeWin.method();
            console.log(body.html()) //得到iframe页的body内容
            body.find('input[name=role_number]').val(data.role_number);
            body.find('input[name=role_name]').val(data.role_name);
            body.find('#status input[value=' + data.status + ']').attr("checked", "checked");
            //重载
            iframeWin.layui.form.render("select");
            iframeWin.layui.form.render("radio");


          }
          , yes: function (index, layero) {
            var iframeWindow = window['layui-layer-iframe' + index]
                , submitID = 'LAY-user-front-submit'
                , submit = layero.find('iframe').contents().find('#' + submitID);
            //监听提交
            iframeWindow.layui.form.on('submit(' + submitID + ')', function (data) {
              var field = data.field; //获取提交的字段
              console.log(field)
              //提交 Ajax 成功后，静态更新表格中的数据
              $.ajax({
                url: "/",
                type: "post",
                data: field,
                dataType: "json",
                success: function (res) {
                  if (res.code == 200) {
                    layer.msg(res.msg);
                    //执行重载
                    table.reload('LAY-role-manage', {
                      where: {
                        key: {
                          id: new Date().getTime()
                        }
                      }
                    });
                  }
                }
              });
              table.reload('LAY-role-front-submit'); //数据刷新
              layer.close(index); //关闭弹层
            });

            submit.trigger('click');
          }
        });


      } else if(obj.event === 'del'){
        var data = obj.data;
        layer.confirm('确定删除吗？', function(index) {
          //定义空数组
          var ids = data.id;
          //通过Ajax访问后台实现删除功能
          $.ajax({
            url:`/role/deleteRole/${ids}`,
            type:"delete",
            traditional:true, //用传统的方式来序列化数据
            success:function(res){
              if(res.code == 200){
                layer.msg(res.msg);
                //执行重载
                table.reload('LAY-role-manage', {
                  page: {
                    curr: 1 //重新从第 1 页开始
                  }
                  ,where: {
                    key: {
                      id: new Date().getTime()
                    }
                  }
                });
              }
              if(res.code == 500){
                layer.msg(res.msg);
              }
            }
          })

        });
      }

      $('.layui-btn.layuiadmin-btn-useradmin').on('click', function () {
            var type = $(this).data('type');
            active[type] ? active[type].call(this) : '';
          }
      );
    })
  })





</script>

</body>
</html>
